<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-sclae=1.0,user-scalable=0">
	<script type="text/javascript" src="js/flexible.js"></script>
	<link rel="stylesheet" type="text/css" href="css/base.css">
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<script type="text/javascript" src="js/h5.min.js"></script>
	<title>xuluo</title>
	<style type="text/css">
		html,body{max-width: 750px;margin: 0 auto;}
		.circleW{width:48px;height:48px;position:relative;border-radius:50%;margin: 0 auto;}
		.circleW .cav1,.circleW .cav2{position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;border-radius:50%}
		.circleW .circle{width:34px;height:34px;border-radius:50%;line-height:34px;text-align:center;color:#fff;position:absolute;left:7.8px;top:7.2px;background:#85dcfa}
	</style>
</head>
<body>
	 <div class="circleW" flex-box="0" flex="cross:center main:center">
        <canvas width="48" height="48" class="cav1"></canvas>
        <canvas width="48" height="48" class="cav2"></canvas>
        <div class="circle">80%</div>
      </div>
	<script type="text/javascript">
    	var circle=function(bgColor,i,bdColor,percent){
	        var canv=$('.circleW .cav1')[i];
	        var context=canv.getContext("2d");
	        context.lineWidth=8;
	        context.strokeStyle=bgColor;
	        context.arc(24,24,24,0.7*Math.PI,0.3*Math.PI);
	        context.stroke();

	        var canv2=$('.circleW .cav2')[i];
	        var context2=canv2.getContext("2d");
	        var num=0.7;
	        function draw(num){
	          context2.beginPath(); 
	          context2.lineWidth=7;
	          context2.strokeStyle=bdColor;
	          context2.arc(24,24,24,0.7*Math.PI,num*Math.PI);
	          context2.stroke();
	        }
	        var timer=setInterval(function(){     
	          if(num>=(1.6*percent+0.74)){
	            clearInterval(timer);
	          }else{
	            draw(num);
	            num=num+0.05;
	          }
	        },100);
	    };
      circle('#bdeeff',0,'#0bb9f6',0.8);
    </script>
</body>
</html>